<template>
	<view class="my_body">
		<view class="m_head" :class="isRealName=='未实名'?'':'headChange'">
			<view class="con">
				<view class="m_head_left">
					<view class="main">
						<!-- <image :src="avatar==''?'../../static/icon/moren.jpg':webImgUrl+avatar" mode=""
							@click="chooseTheImg"></image> -->
						<image :src="webImgUrl+avatar" mode="" @click="chooseTheImg"></image>
					</view>
				</view>
				<view class="m_head_right">
					<view class="top">
						<!-- <text class="tit" v-if="username==''">用户名</text> -->
						<!-- 修改用户名@click="editNameClick" -->
						<text class="tit">{{username}}</text>
						<text class="cls" v-if="userInfo.title==null || userInfo.title==''">职称</text>
						<text class="cls" v-if="userInfo.title!='' && userInfo.title!=null">{{userInfo.title}}</text>
					</view>
					<view class="bot">
						<text class="xueli" v-if="userInfo.educationName=='' || userInfo.educationName==null">学历</text>
						<text class="xueli"
							v-if="userInfo.educationName!='' && userInfo.educationName!=null">{{userInfo.educationName}}</text>
						<text class="zhuanye" v-if="userInfo.major=='' || userInfo.major==null">专业</text>
						<text class="zhuanye"
							v-if="userInfo.major!='' && userInfo.major!=null">{{userInfo.major}}</text>
						<text class="xx" v-if="userInfo.school=='' || userInfo.school==null">毕业院校</text>
						<text class="xx" v-if="userInfo.school!='' && userInfo.school!=null">{{userInfo.school}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="m_main" :style="isRealName=='未实名'?'height:100%':'height:300rpx'">
			<view class="m_main_div" v-if="isRealName=='未实名'">
				<view class="m_main_card" @click="imgIsRealName">
					<image src="../../static/icon/m_card.png" mode=""></image>
				</view>
				<view class="m_main_bot">
					<view @click="myResume">
						<image src="../../static/icon/jianli.png" mode=""></image>
						<text>我的简历</text>
					</view>
					<view @click="myRelease">
						<image src="../../static/icon/fabu.png" mode=""></image>
						<text>我的发布</text>
					</view>
					<view @click="myCert">
						<image src="../../static/icon/zhengshu.png" mode=""></image>
						<text>我的证书</text>
					</view>
				</view>
			</view>
			<view class="m_main_div m_main_shiming" v-if="isRealName=='已实名'">
				<view class="m_main_div_title">
					资料管理
				</view>
				<view class="m_main_bot">
					<view @click="myResume">
						<image src="../../static/icon/jianli.png" mode=""></image>
						<text>我的简历</text>
					</view>
					<view @click="myRelease">
						<image src="../../static/icon/fabu.png" mode=""></image>
						<text>我的发布</text>
					</view>
					<view @click="myCert">
						<image src="../../static/icon/zhengshu.png" mode=""></image>
						<text>我的证书</text>
					</view>
				</view>
			</view>
		</view>
		<view class="m_bottom" @click="myNews" :style="isRealName=='已实名'?'margin-top:0':'margin-top:10rpx'">
			<view class="m_bottom_left">
				<image src="../../static/icon/xiaoxi.png" mode=""></image>
				<text>消息提醒</text>
			</view>
			<!-- <view class="m_bottom_right">
				<image src="../../static/icon/youjiantou.png" mode=""></image>
			</view> -->
		</view>

		<view class="m_bottom" @click="myGuanzhu">
			<view class="m_bottom_left">
				<image src="../../static/icon/my_shoucang.png" mode=""></image>
				<text>我的收藏</text>
			</view>
		</view>
		<view class="m_bottom" @click="more(certsList)">
			<view class="m_bottom_left">
				<image src="../../static/icon/my_zsdt.png" mode=""></image>
				<text>证书动态</text>
			</view>
		</view>
		<view class="m_bottom" @click="contact">
			<view class="m_bottom_left">
				<image src="../../static/icon/my_connect.png" mode=""></image>
				<text>联系我们</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				webImgUrl: '',
				city: '',
				userId: '',
				username: '',
				avatar: '',
				isEditName: false,
				show: false,
				editName: '',
				certsList: [], //证书动态
				userInfo: {
					education: '',
					major: '',
					school: '',
					title: ''
				},
				userInfo: {
					userId: '',
					sfzh: ''
				}
			}
		},
		computed: {
			isRealName() {
				return this.$store.state.isRealName
			},
			userinfo() {
				return this.$store.state.userInfo
			},
			userName() {
				return this.$store.state.username
			},
			getavatar() {
				return this.$store.state.avatar
			},
			getUserId() {
				return this.$store.state.userId
			},
			sfzh() {
				return this.$store.state.sfzh
			}
		},
		// watch: {
		// 	getavatar: function(ov, nv) {
		// 		this.avatar=nv
		// 		console.log(nv)
		// 	}
		// },
		created() {
			this.editName = this.userName
			this.$store.dispatch('getCerts')
			this.$store.dispatch('getSalary')
			this.$store.dispatch('getEdu')
			// 获取图片前缀
			this.webImgUrl = this.$webUrl

			this.username = this.userName
			this.avatar = this.getavatar
			this.userInfo.userId = this.getUserId
			this.userInfo.sfzh = this.sfzh
			// 证书动态
			this.getCerts()
			// 简历接口
			this.getResume()
		},
		mounted() {
			this.city = this.$store.state.cityNow
		},

		methods: {
			// 强制刷新、重新加载页面
			test() {
				this.$forceUpdate()
			},
			// 上传头像
			chooseTheImg() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: 'https://www.chuanjianbao.com/buildtreasure/news/pucture/fileup', //post请求的地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: { //请求头可自定义
								'Content-Type': 'application/json;charset=UTF-8',
								// 'X-Access-Token': TOKEN
								'Cookie': 'JSESSIONID=' + uni.getStorageSync('sessionId')
							},
							formData: {
								fileType: 'avatar',
								file: tempFilePaths[0]
							},
							success: (uploadFileRes) => {

								//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
								_this.avatar = JSON.parse(uploadFileRes.data).data
								_this.$myResquest.phoneInfoPut({
									userId: _this.getUserId,
									avatar: _this.avatar
								}).then(res => {
									if (res.data.code == 200) {
										_this.$store.commit('newAvatar', _this.avatar)
										_this.test()
										// _this.$myResquest.phoneInfo({
										// 	userId:_this.getUserId
										// }).then(res=>{
										// 	if(res.data.code==200){
										// 		_this.avatar=res.data.data.avatar
										// 	}
										// })
									}
								})
							}
						})
					}
				})
			},
			// 修改用户名
			editNameClick() {
				this.show = true
				this.isEditName = true
			},
			cancle() {
				this.show = false
				this.isEditName = false
				this.editName = this.userName
			},
			// 我的收藏
			myGuanzhu() {
				uni.navigateTo({
					url: '../zhaopin1/zhaopin1?title=' + "我的收藏"
				})
			},
			// 证书动态
			getCerts() {
				// 身份证号为空表示未实名，不能查证书状态
				if (this.userInfo.sfzh != '' && this.userInfo.sfzh != null) {
					this.$myResquest.getCert(this.userInfo).then(res => {
						if (res.data.code == 200) {
							let jsonData = JSON.parse(res.data.data)
							this.certsList = jsonData
						}
					})
				}

			},
			more(list) {
				let userIsReal = uni.getStorageSync('userIsReal')
				if (userIsReal == '未实名') {
					uni.showToast({
						title: '请先去实名认证!',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '../../common/realName/CertiDynamics'
						})
					}, 1000)
				} else {
					uni.navigateTo({
						url: '../../pageA/certDynamics/certDynamics?data=' + JSON.stringify(list)
					})
				}

			},
			// 会员卡图片点击认证
			imgIsRealName() {
				let userIsReal = uni.getStorageSync('userIsReal')
				if (userIsReal == '未实名') {
					uni.navigateTo({
						url: '../../common/realName/noRealName?title=' + "会员卡"
					})
				}
			},
			// 联系我们
			contact() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc2201d228b8768400'
					},
					corpId: 'ww2e23e1f7cdf7ff4c',
					success(res) {}
				})
			},
			// 修改用户名
			submit(data) {

			},
			// 简历接口
			getResume() {
				this.$myResquest.getResumeGet({
						userId: this.getUserId
					}).then(res => {
						if (res.data.code == 200) {
							this.userInfo = res.data.data
						}
					}),
					this.$myResquest.phoneInfo({
						userId: this.getUserId
					}).then(res => {
						if (res.data.code == 200) {
							// this.userInfo=res.data.data
						}
					})
			},

			// 我的发布
			myRelease() {
				uni.navigateTo({
					url: "../../pageA/myRelease/myRelease"
				})
			},
			// 我的证书
			myCert() {
				if (this.isRealName == "未实名") {
					uni.navigateTo({
						url: "../../common/realName/noRealName"
					})
				}
				if (this.isRealName == "已实名") {
					uni.navigateTo({
						url: '../../common/realName/realName'
					})
				}

			},
			// 我的简历
			myResume() {
				let userIsReal = uni.getStorageSync('userIsReal')
				// if(real=='已实名'){
				// 	uni.navigateTo({
				// 		url: "../../pageA/myResume/myResume"
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url: '../../common/realName/noRealName?title=我要实名'
				// 	})
				// }
				// if (userIsReal == '未实名') {
				// 	uni.showToast({
				// 		title: '请先去实名认证!',
				// 		icon: 'none'
				// 	})
				// 	setTimeout(function() {
				// 		uni.navigateTo({
				// 			url: '../../common/realName/nowReal?title=简历实名'
				// 		})
				// 	}, 1000)
				// } else {
				uni.navigateTo({
					url: "../../pageA/myResume/myResume"
				})
				// }

			},
			myNews() {
				uni.navigateTo({
					url: "../../pageA/myNews/myNews"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.my_body {
		// position: fixed;
		background: #f6f8fa;
		padding-bottom: 100px;
		height: 100%;
	}

	.m_head {
		width: 750rpx;
		height: 500rpx;
		background: #5cd1ce;
		border-bottom-left-radius: 114rpx;
		border-bottom-right-radius: 114rpx;

		.con {
			display: flex;
			margin-left: 72rpx;
			padding-top: 148rpx;
			box-sizing: border-box;
			align-items: center;

			.m_head_left {
				width: 156rpx;
				height: 156rpx;
				background: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;

				.main {
					width: 148rpx;
					height: 148rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}

			.m_head_right {
				padding-left: 18rpx;
				box-sizing: border-box;

				.top {
					height: 88rpx;
					display: flex;
					align-items: center;

					.tit {
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #ffffff;
					}

					.cls {
						padding: 8rpx 14rpx;
						box-sizing: border-box;
						background: #ffffff;
						border-radius: 18rpx;
						text-align: center;
						color: #5ed1ce;
						font-size: 19rpx;
						margin-left: 12rpx;
					}
				}

				.bot {
					color: #ffffff;

					.xueli,
					.zhuanye {
						box-sizing: border-box;
						padding-right: 14rpx;
						border-right: 2rpx solid #ffffff;
					}

					.zhuanye,
					.xx {
						padding-left: 14rpx;

					}
				}
			}
		}
	}

	.headChange {
		height: 432rpx;
	}

	.m_main {
		max-width: 100%;


		.m_main_div {
			width: 100%;
			margin: 0 auto;

			.m_main_card {
				width: 740rpx;
				height: 346rpx;
				padding-top: 22rpx;
				box-sizing: border-box;
				margin: -115rpx auto 0;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.m_main_bot {
				width: 560rpx;
				display: flex;
				padding-top: 34rpx;
				box-sizing: border-box;
				justify-content: space-between;
				margin: 0 auto;
				height: 220rpx;

				view {
					height: 160rpx;
					width: 120rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 88rpx;
						height: 88rpx;
					}

					text {
						padding-top: 24rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						box-sizing: border-box;
						color: #333333;
					}
				}
			}
		}

		.m_main_shiming {
			width: 700rpx;
			height: 327rpx;
			/* background: #ffffff; */
			border-radius: 20rpx;
			box-shadow: 0px 13rpx 13rpx 0rpx rgba(0, 0, 0, 0.1);
			padding: 42rpx 0 0 34rpx;
			box-sizing: border-box;
			position: absolute;
			top: 370rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #ffffff;

			.m_main_div_title {
				font-size: 30rpx;
				font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
				font-weight: bold;
				text-align: center;
				color: #8b8b8c;
			}

			.m_main_bot {
				margin: 23rpx auto 0;
				border-top: 2rpx dashed #c9caca;

				view {
					text {
						font-size: 26rpx;
						color: #a1a1a1;
					}

				}
			}
		}
	}

	.m_bottom {
		background: #ffffff;
		height: 102rpx;
		display: flex;
		margin-top: 10rpx;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
		width: 658rpx;
		margin: 24rpx auto 0;
		padding-left: 50rpx;
		border-radius: 20rpx;

		.m_bottom_left {
			display: flex;
			align-items: center;
			font-size: 33rpx;
			color: #a1a1a1;
			font-weight: 400;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 22rpx;
			}
		}

		.m_bottom_right {
			image {
				width: 14rpx;
				height: 26rpx;
			}
		}

	}

	.zhezhaoceng {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);

		.editName {
			position: absolute;
			width: 580rpx;
			background: #ffffff;
			padding: 20rpx;
			box-sizing: border-box;
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
			transform: translateY(-50%) translateX(-50%);


			.tit {
				margin-bottom: 21rpx;
				font-size: 47rpx;
				font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
				font-weight: 400;
				color: #fefefe;
			}

			input {
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.5);
			}

			.btn {
				display: flex;
				justify-content: space-around;
				margin: 50rpx 0 9rpx;

				view {
					width: 150rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					background: #5CD1CE;
					border-radius: 10rpx;
					color: #ffffff;
				}
			}
		}
	}
</style>
